<template>
	<view class="content">
		<view class="page-head">
			<!-- <image class="arrow" src="/static/icons/nav-arrow.png" @click="goBack()" /> -->
			<uni-icons class="gap-top" type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
			<text class="white-font gap-top">{{ detail.name }}</text>
		</view>

		<view class="tips-box">
			<view class="tips-bg white-content">
				<view class="tips-inner">当前扭蛋机需消耗Z元素{{ detail.price }}/次</view>
			</view>
		</view>
		<!--当前扭蛋机需消耗Z元素10.00/次-->

		<view class="main-photo">
			<video :show-progress="false" class="videobg" :style="{
          width: this.windowWidth + 'px',
          height: this.windowWidth + 'px',
        }" :autoplay="true" :loop="true" :muted="true" :controls="false"
				src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/206_1712896021.mp4">
				<view class="right_icon">
					<image @click="close" class="guizeimg" src="/static/icons/z-meta/yiwen.png" mode="heightFix">
					</image>
					<image @click="openreward" class="guizeimg" src="/static/icons/z-meta/guize.png" mode="heightFix">
					</image>
				</view>
			</video>
			<!-- <van-image width="100%" height="700rpx" :src="image"></van-image> -->
		</view>

		<view class="picker-meta-box">
			<view class="picker-meta">
				<van-image width="2rem" height="2rem" src="/static/icons/z-meta/z-picker-icon.png"></van-image>
				<text class="white-content meta-text">当前Z元素数量：{{ wallet.ticket }}</text>
			</view>

			<view class="picker-btn-box">
				<view class="picker-btn" @click="buy(1)">
					<text class="white-content">扭1次</text>
				</view>
				<view class="picker-btn" @click="buy(5)">
					<text class="white-content">扭5次</text>
				</view>
				<view class="picker-btn" @click="buy(10)">
					<text class="white-content">扭10次</text>
				</view>
			</view>
		</view>

		<view class="pd">
			<section-title title="本机奖品池" class="gap-top" />
			<view class="products-list">
				<template v-for="(e, index) in products" :key="index">
					<product-item :title="e.name" :pic="e.image" :price="e.price/100" :percent="e.percent" badge=""
						v-on:click="showDialogImage(e)" class="productmg" />
				</template>
			</view>
		</view>
		<van-popup :show="show" custom-style="background-color: rgba(0, 0, 0, 0)">
			<view class="guizebg">
				<view class="guizeitem">
					<image class="guizeitemimage"
						src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/text-board-bg.png"
						mode="widthFix"></image>
					<view class="plabel">
						<view class="ptitle">规则</view>
						<view style="height: 121px;">
							<scroll-view scroll-y="true" style="height: 121px;">
								<text class="pcontent">
									{{detail.instruction}}
								</text>
							</scroll-view>
						</view>
					</view>
				</view>
				<image src="../../static/pay-close.png" class="close" @click="close"></image>
			</view>
		</van-popup>
		<van-popup :show="show1" custom-style="background-color: rgba(0, 0, 0, 0)">
			<gifts-dialog-content :gifts="gifts" v-on:close="closeGiftsDialog" />
		</van-popup>
		<Pay
		    v-if="show2"
			:title="detail.title"
			:count="count"
			:gameId="detail.id"
			gameType="Z福利"
					:image="detail.main_photo"
			:price="detail.price"
			:prices="[{count: 1}, {count: 5}, {count: 10  }]"
			:isFull="0"
			@success="success"
			@close="closechoujiang"
		  />
		<van-dialog use-slot :show="isCouponModalVisible" :show-confirm-button="false" width="312">
			<prize-dialog-content :image="dialogItem.image" :name="dialogItem.name" :price="dialogItem.price"
				v-on:close="closeCouponModal" />
		</van-dialog>
	</view>
</template>

<script>
	import {
		lzwealDetail,
		buyzzweal
	} from "@/api/z_meta";
	import {
		loadWallet
	} from '@/api/user'
	import SectionTitle from "@/wxcomponents/section-title";
	import productItem from "@/wxcomponents/product-item";
	import Pay from '@/wxcomponents/pay'
	import GiftsDialogContent from '@/wxcomponents/gifts-dialog-content'
	import PrizeDialogContent from '@/wxcomponents/prize-dialog-content'
	export default {
		name: "z-picker",
		data() {
			return {
				isCouponModalVisible: false,
				count: 0,
				windowWidth: 375,
				image: "/static/icons/z-meta/z-cat.png",
				show: false,
				show1: false,
				show2: false,
				id: null,
				detail: {
					name: "",
					price: "",

				},
				gifts: [],
				products: [],

				wallet: {},
				dialogItem: {
					image: "",
					name: "",
					price: ""
				}
			};
		},
		components: {
			SectionTitle,
			productItem,
			Pay,
			GiftsDialogContent,
			PrizeDialogContent
		},
		onLoad(option) {
			if (option.id) {
				this.id = parseInt(option.id);
			}
		},
		async onShow(option) {
			let sys = uni.getSystemInfoSync();
			this.windowWidth = sys.windowWidth;
			await this.getlzwealDetail();
			await this.loadWallet()
		},
		methods: {
			showDialogImage(item) {
				this.dialogItem = {
					image: item.image,
					name: item.name,
					price: item.price / 100
				}
				this.isCouponModalVisible = true
			},

			closeCouponModal() {
				this.isCouponModalVisible = false;
			},
			openreward() {
				uni.navigateTo({
					url: "/pages/subPackage/rewardrecord?id=" + this.id
				})
			},
			getlzwealDetail() {
				lzwealDetail({
					id: this.id,
				}).then((res) => {
					console.log(res);
					this.detail = res.data;
					this.products = res.data.products
				});
			},
			close() {
				this.show = !this.show;
			},
			gopacket() {
				uni.navigateTo({
					url: '/pages/package/Cindex'
				})
			},
			goBack() {
				uni.switchTab({
					url: "/pages/z-meta/index",
				});
			},
			buy(count) {
				this.count = count
				this.show2 = true
			},
			closechoujiang() {
				this.show2 = false
			},
			async success(gifts) {
				this.gifts = gifts
				this.show1 = true;
				await this.loadWallet()
			},
			closeshow1() {
				this.show1 = !this.show1;
			},
			closeGiftsDialog() {
				this.show1 = false;
			},
			async loadWallet() {
				const res = await loadWallet()
				const data = res.data || {}
				const score = data.score || 0
				const ticket = data.ticket
				this.wallet = {
					balance: 0,
					score: score,
					ticket: ticket,
				}
			}
		},
	};
</script>

<style lang="scss">
	@import "src/static/scss/common";

	.arrow {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-top: 26px;
	}
	page {
		background-color: #0a050b;
	}

	.rewardbg {
		width: 100%;
	}

	.reward {
		position: relative;
	}

	.rewardimage {
		width: 624rpx;
	}

	.rewarditems {
		width: 520rpx;
		position: absolute;
		left: 50%;
		top: 50rpx;
		transform: translateX(-50%);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.rewarditemimg {
		width: 100%;
		height: 520rpx;
		background-color: #3f3f3f;
		border: solid 2rpx #ffffff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.innerimg {
		// width: 100%;
		height: 520rpx;
	}

	.rewarditemimg1 {}

	.gongxi {
		width: 286rpx;
		height: 44rpx;
		margin: 20rpx auto 30rpx;
	}

	.rewarditemtext {
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
		background-color: #000000;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.rewarditemtext1 {
		width: 100%;
		text-align: center;
		line-height: 50rpx;
		height: 50rpx;
		background-color: #000000;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.btnbg {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.fenjie {
		width: 262rpx;
		height: 88rpx;
		background: url("../../static/icons/z-meta/btn_bg.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 100%;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}

	.next {
		width: 262rpx;
		height: 88rpx;
		background: url("../../static/icons/z-meta/btn_bg1.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 100%;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}

	.guizebg {
		width: 100%;
	}

	.guizeitem {
		width: 700rpx;
		position: relative;
	}

	.guizeitemimage {
		width: 100%;
	}

	.plabel {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		padding: 0 20rpx;
	}

	.ptitle {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 36rpx;
		color: #ffffff;
	}

	.pcontent {
		color: #ffffff;
		line-height: 32rpx;
		font-size: 26rpx;
		margin-bottom: 6rpx;
	}

	.close {
		position: absolute;
		right: 40rpx;
		top: 20rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.content {
		padding: 0;
	}

	.pd {
		padding: 40rpx 25rpx;
	}

	.page-head {
		display: flex;
		gap: 10px;
		width: 100vw;
		line-height: 88px;
		box-sizing: border-box;
	}

	.main-photo {
		text-align: center;
		margin-top: 26rpx;
		position: relative;
	}

	.right_icon {
		position: absolute;
		right: 24rpx;
		top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.guizeimg {
		height: 88rpx;
		margin-bottom: 20rpx;
	}

	.videobg {
		width: 100%;
		controls: none;
	}

	.tips-box {
		display: flex;
		justify-content: center;
		margin-top: 36rpx;
	}

	.tips-bg {
		width: 520rpx;
		height: 102rpx;
		background: url("/static/icons/z-meta/tips-box.png") no-repeat center;

		display: flex;
		justify-content: center;
		align-items: center;

		.tips-inner {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 0 24rpx;
			// background: linear-gradient(135deg,
			// 		rgba(225, 116, 237, 0.5) 0%,
			// 		rgba(47, 118, 236, 0.5) 100%);
		}
	}

	.gap-top {
		margin-top: 26px;
	}

	.picker-meta-box {
		margin-top: -190rpx;

		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 10;
	}

	.picker-meta {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.meta-text {
			padding-left: 20rpx;
		}
	}

	.picker-btn-box {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		z-index: 10;

		.picker-btn {
			width: 150rpx;
			height: 150rpx;
			font-size: 36rpx;
			font-weight: bold;

			display: flex;
			justify-content: center;
			align-items: center;

			background: url("/static/icons/z-meta/z-picker-btn.png") no-repeat;
			background-size: contain;
		}
	}

	.productmg {
		width: 31%;
	}

	.products-list {
		gap: 10px;
	}

	.gifteq:nth-child(3n + 1) {
		margin-right: 2%;
	}

	.gifteq:nth-child(3n + 2) {
		margin-right: 2%;
	}
</style>
